<template>
    <el-form-item
        :label="item.label && !item.question ? item.label : ''"
        :prop="item.prop"
    >
        <span slot="label" v-if="item.question">
            <el-tooltip :content="item.question" placement="top">
                <i class="el-icon-question"></i>
            </el-tooltip>
            {{ item.label }}
        </span>
        <el-color-picker
            v-model="formData[item.prop]"
            :disabled="item.disabled"
            :size="item.size | setSize(item.size)"
            :show-alpha="item.showAlpha"
            :color-format="item.colorFormat"
            :popper-class="item.popperClass"
            :predefine="item.predefine"
            @change="handleChange"
            @active-change="handleActiveChange"
        />
    </el-form-item>
</template>
<script>
import mixin from '../mixins/index.js'
export default {
    name: 'df-colorPicker',
    mixins: [mixin],
    props: {
        item: {
            type: Object,
            default() {
                return {
                    /**
                     * 绑定值
                     * @type string
                     * @value
                     */
                    colorPickerVal: '#409EFF',
                    /**
                     * 是否禁用
                     * @type Bolean
                     * @value false/true
                     */
                    disabled: false,
                    /**
                     * 尺寸
                     * @type string
                     * @value medium / small / mini
                     */
                    size: 'medium',
                    /**
                     * 是否支持透明度选择
                     * @type Bolean
                     * @value false/true
                     */
                    showAlpha: false,
                    /**
                     * 写入 v-model 的颜色的格式
                     * @type number
                     * @value hsl / hsv / hex / rgb
                     */
                    colorFormat: 'rgb',
                    /**
                     * ColorPicker 下拉框的类名
                     * @type string
                     * @value
                     */
                    popperClass: '',
                    /**
                     * 预定义颜色
                     * @type array
                     * @value
                     */
                    predefine: [],
                    /**
                     * 自定义类名
                     * @type string
                     * @value 'red'
                     */
                    class: '',
                    /**
                     * 输入框关联的label文字
                     * @type String
                     * @value ''
                     */
                    label: ''
                }
            }
        },
        /**
         * 提交的表单项
         * @type Object
         */
        formData: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    methods: {
        /**
         * 面板中当前显示的颜色发生改变时触发
         * @param 当前显示的颜色值
         *
         */
        handleActiveChange(data) {
            this.dispatch('baseForm', 'onColorPickerActiveChange', {
                data,
                prop: this.item.prop
            })
        },
        /**
         * 当绑定值变化时触发
         * @param 当前值
         *
         */
        handleChange(data) {
            this.dispatch('baseForm', 'onColorPickerChange', {
                data,
                prop: this.item.prop
            })
        }
    }
}
</script>
